<template>
  <div class="tv_detail">
    <div class="tv_detail_heard">
      <div
        class="heard_backdrop"
        :style="{ backgroundImage: `url(${getBackdropUrl(tv_detail.backdrop_path)})` }"
      ></div>
      <div class="content"></div>
      <div class="content2"></div>
    </div>
    <div class="season_warp">
      <div class="poster">
        <img :src="getPosterUrl(currentSeason.poster_path)" alt="" />
      </div>
      <div class="season_info">
        <div class="tv_name">{{ tv_detail.name }}</div>
        <a-space>
          <span class="season_name">{{ currentSeason.name }}</span>

          <span> 共{{ currentSeason.episode_count }}集（库中有{{ episodes.length }}集）</span>
        </a-space>
        <div>
          <a-space>
            <span class="season_rating">评分: {{ tv_detail.vote_average?.toFixed(1) }}</span>
            <span class="season_date">{{ currentSeason.air_date }}</span>

            <span v-for="id in tv_detail.genres" :key="id">{{ genres[id] }}</span>
          </a-space>
        </div>
        <div class="season_overview">{{ currentSeason.overview }}</div>
      </div>
    </div>
    <div style="margin-top: 10px; overflow-x: auto">
      <a-space>
        <a-button
          v-for="(item, index) in seasons"
          :type="currentSeason.id == item.id ? 'primary' : 'default'"
          @click="((currentSeason = item), getEpisodes(item.id))"
        >
          {{ item.name }}
        </a-button>
      </a-space>
    </div>
    <div>
      <!-- <h2 style="color: black; margin-top: 20px; padding-left: 50px">剧集列表</h2> -->
      <!-- <a-space class="episode_list">
        <div v-for="(item, index) in episodes" :key="index" class="episode_item">
          <img :src="getStillUrl(item.still_path)" alt="" class="episodes_img" />
          <div class="episode_name">{{ item.episode_number }}. {{ item.name }}</div>
        </div>
      </a-space> -->
    </div>
    <EpisodeGallery :episodes="episodes" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { genres } from '@/utils/data'
import API from '@/api'
import EpisodeGallery from './EpisodeGallery.vue'
const route = useRoute()
const seasons = ref([])
const episodes = ref([])
const currentSeason = ref([])
const tv_detail = ref({})
// 获取电影详情
const getTvDetail = async () => {
  API.getTvDetail(route.query.id).then((res) => {
    res.genres = res.genres.split(',')
    tv_detail.value = res
    console.log('🚀 ~ API.getTvDetail ~ tv_detail:', res)
  })
  API.getSeasons(route.query.id).then((res) => {
    console.log('getSeasons >>>>>:', res)
    seasons.value = res
    currentSeason.value = res[0]
    getEpisodes(res[0].id)
  })
}
function getEpisodes(seasonId) {
  API.getEpisodes(seasonId).then((res) => {
    episodes.value = res
  })
}

// 获取电影海报的完整 URL
const getPosterUrl = (path) => `https://image.tmdb.org/t/p/w500${path}`

// 获取背景图的完整 URL
const getBackdropUrl = (path) => `https://image.tmdb.org/t/p/original${path}`
// 获取剧照的完整 URL still_path
const getStillUrl = (path) => `https://image.tmdb.org/t/p/original/${path}`

const credits = ref([])
// 获取演员列表
const getTvCredits = async () => {
  API.getCredits({ media_type: 'tv', media_id: route.query.id }).then((res) => {
    credits.value = res
  })
}
onMounted(() => {
  getTvDetail()
  // getTvDetail()
})
</script>

<style lang="less" scoped>
.tv_detail {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  position: relative;

  .tv_detail_heard {
    position: relative;
    width: 100%;
    height: 600px;
    // overflow: hidden;
    align-items: end;
    padding-left: 80px;

    .content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 600px;
      // border: 1px solid red;
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 1) 85%,
        rgba(255, 255, 255, 1) 100%
      );
      z-index: 2;
    }
    .content2 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 550px;
      // border: 1px solid red;
      background: linear-gradient(
        270deg,
        rgba(255, 255, 255, 0) 60%,
        rgba(255, 255, 255, 1) 90%,
        rgba(255, 255, 255, 1) 100%
      );
      z-index: 2;
    }
    .heard_backdrop {
      width: 100%;
      height: 500px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 0px 0;
    }
  }
  .season_warp {
    // display: none;
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    height: 300px;
    // border: 1px solid red;
    // overflow: hidden;
    z-index: 99;
    padding-left: 50px;
    // display: flex;
    .poster {
      width: 300px;
      // border: 1px solid red;
      img {
        width: 200px;
        height: 300px;
        border-radius: 5px;
      }

      // height: 100%;
      // border: 1px solid red;
      background-size: cover;
      background-position: 0 0;
      z-index: 99;
      .season_name {
        margin-top: 10px;
        width: 200px;
        height: 30px;
        // background-color: rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        // color: aliceblue;
        line-height: 20px;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
      }
    }
    .season_info {
      z-index: 99;
      width: calc(100% - 20px);
      // height: 300px;
      padding-top: 10px;
      // border: 1px solid red;
      display: flex;
      flex-direction: column;
      gap: 10px;
      // justify-content: flex-end;

      // color: aliceblue;
      .tv_name {
        font-size: 26px;
        font-weight: 600;
      }
      .season_name {
        font-size: 18px;
        font-weight: 600;
      }
    }
  }
  .episode_list {
    width: 100%;
    overflow-x: auto;
    .episode_item {
      width: 150px;
    }
    align-items: normal !important;
    padding: 10px 5px 10px 5px;
  }
}
.episodes_img {
  width: 150px;
  border-radius: 5px;
}
.season_overview {
  display: -webkit-box; /* 必须结合此属性 */
  -webkit-box-orient: vertical; /* 设置子元素垂直排列 */
  -webkit-line-clamp: 4; /* 限制显示 5 行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 添加省略号 */
  line-height: 1.5; /* 设置行高，确保高度计算正确 */
  max-height: calc(1.5em * 4); /* 最大高度为 5 行的高度 */
  // font-size: 16px; /* 设置字体大小 */
}
</style>
